<template>
  <div class="box">
        <div class="title">任务列表</div>
        <div class="list">
          <div
            :class="{ unfinished: item.status == false }"
            class="task"
            v-for="(item, index) in $store.state.tasklist"
            :key="index"
          >
            <div>
              <span
                ><input
                  @click="handleClick(item)"
                  type="checkbox"
                  :checked="item.status"
              /></span>
              <span>{{ item.id }}</span>
              <span>{{ item.name }}</span>
            </div>
            <span @click="del(index,item)">删除</span>
          </div>

          <div v-show="$store.state.tasklist.length == 0" class="empty">
            任务列表为空,请添加一个任务!
          </div>
        </div>
      </div>
</template>

<script>
export default {
    methods:{
        handleClick(item){
            this.$store.commit('changeStatus',item);
        },
        del(index,item){
            this.$store.state.tasklist.splice(index,1);
            this.update();
        },
        update(){
            for(let i=0; i<this.$store.state.tasklist.length; i++){
                for(let index in this.$store.state.tasklist[i]){
                    this.$store.state.tasklist[i].id = i+1;
                }
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.box .title {
  font-weight: bold;
  line-height: 40px;
}
.box .list .task {
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  margin: 10px 0;
  background-color: lightseagreen;
  line-height: 40px;
}
.box .list .task.unfinished {
  background-color: red;
}
.box .list .task span {
  display: inline-block;
  margin-right: 10px;
}
.empty {
  text-align: center;
  padding: 50px 0;
}
</style>